<template>
  <div class="StatusTag" v-if="status != -1" @click="toPath">
    <span
      v-if="!(isError && status == 5)"
      :class="{tag:true}"
      :style="{backgroundColor:isError ? errorStatus[status].color : statusMap[status].color}"
    >{{ statusTitle ? statusTitle : (isError ? errorStatus[status].name : '预支付')}}</span>

    <!-- //当为锁定异常标签时添加弹出框 -->
    <el-popover
     v-if="isError && status == 5"
      placement="top-start"
      title="锁定理由"
      trigger="hover"
      :content="lockReason"
    >
    <span
      slot="reference"
        :class="{tag:true}"
        :style="{backgroundColor:isError ? errorStatus[status].color : statusMap[status].color}"
      >{{ statusTitle ? statusTitle : (isError ? errorStatus[status].name : '预支付')}}</span>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "StatusTag",
  props: {
    status: {
      default: -1,
      type: Number
    },
    isError: {
      type: Boolean,
      default: false
    },
    bgColor: {
      default: "#000",
      type: String
    },
    yund_id: {
      type: Number,
      default: 0
    },
    statusTitle: {
      default: "",
      type: String
    },
    lockReason: {
      default: "",
      type: String
    }
  },
  data() {
    return {
      statusMap: {
        0: {
          name: "支付中",
          color: "#324157"
        },
        1: {
          name: "支付成功",
          color: "#30B08F"
        },
        2: {
          name: "支付失败",
          color: "#f96f72"
        },
        3: {
          name: "申请中",
          color: "#66b1ff"
        },
        4: {
          name: "拒绝申请",
          color: "#f96f72"
        },
        5: {
          name: "过期",
          color: "#f96f72"
        }
      },
      errorStatus: {
        1: {
          name: "提货异常",
          color: "#ff3b3f"
        },
        2: {
          name: "卸货异常",
          color: "#ff3b3f"
        },
        3: {
          name: "运输异常",
          color: "#ff3b3f"
        },
        4: {
          name: "结算异常",
          color: "#ff3b3f"
        },

        5: {
          name: "锁定订单",
          color: "#ff3b3f"
        }
      }
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {},
    toPath() {
      if (!this.yund_id) return;
      // console.log('this.yund_id',this.yund_id);
      if (this.isError) {
        if ([5].includes(this.status)) {
          //锁定运单不走方法
          return;
        }
        this.$router.push({
          path: "/waybillManagement/unusualList",
          query: {
            yund_id: this.yund_id
          }
        });
      } else {
        this.$router.push({
          path: "/moneyManagment/prePay",
          query: {
            yund_id: this.yund_id
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.StatusTag {
  margin-left: 5px;
  margin-bottom: 5px;
  cursor: pointer;
  .tag {
    width: 60px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: rgb(255, 255, 255);
    border-radius: 5px;
  }
}
</style>
